<div class="flex flex-wrap justify-between items-center py-4 px-4 md:px-8">
  <div class="text-xl">
    {{ 'PAC.MENU.INDICATOR.REGISTER_INDICATOR' | translate: {Default: "Register Indicator"} }}
    {{ indicator()?.id ? indicator().name : ('PAC.INDICATOR.REGISTER.New' | translate: {Default: "New"}) }}
  </div>
  
  <div class="flex flex-wrap ml-auto">
    <!-- <input #fileUpload type="file" class="file-input invisible"
      (change)="handleUploadChange($event)"
      (click)="fileUpload.value=null;"> -->
  
    <div ngmButtonGroup class="flex-wrap">
      <button mat-raised-button displayDensity="cosy" color="primary"
        [disabled]="register_form.formGroup.invalid || register_form.formGroup.pristine || !dirty()"
        (click)="onSubmit()">
        {{ 'PAC.ACTIONS.SAVE' | translate: {Default: "Save"} }}
      </button>

      <button mat-icon-button displayDensity="cosy"
        [cdkMenuTriggerFor]="menu"
        #mt="cdkMenuTriggerFor"
        [class.active]="mt.isOpen()"
      >
        <mat-icon fontSet="material-icons-outlined">more_horiz</mat-icon>
      </button>
    </div>
  </div>
</div>

<div #content class="flex-1 overflow-auto p-2">

  <pac-indicator-register-form #register_form
    [certifications]="certifications$ | async"
    [models]="models()"
    [ngModel]="indicator()"
    (ngModelChange)="onModelChange($event)"
  ></pac-indicator-register-form>
    
  @if (loading()) {
    <div class="absolute top-1/2 left-1/2 -mt-4 -ml-4 z-10">
      <mat-spinner diameter="30" strokeWidth="2">
      </mat-spinner>
    </div>
  }

  <div class="w-full flex flex-col items-center">
    <button mat-flat-button (click)="togglePreview()">
      <mat-icon fontSet="material-icons-round">{{ preview() ? 'expand_less' : 'expand_more' }}</mat-icon>
      <span>
        {{ 'PAC.INDICATOR.DataPreview' | translate: {Default: 'Data Preview'} }}
      </span>
    </button>
    
    @if (preview()) {
      @if (error()) {
        <div class="w-full h-[300px] flex justify-center items-center">
          <span class="">{{ error() }}</span>
        </div>
      } @else {
        <ngm-analytical-card class="w-full h-[300px]"
          [title]="indicator()?.name"
          [dataSettings]="dataSettings()"
          [chartOptions]="chartOptions()"
          [chartSettings]="chartSettings()"
          [options]="{
            realtimeLinked: true,
          }"
          (explain)="setExplains($event)"
          >
          <div class="flex-1 flex items-center md:gap-2">
            <span class="text-base font-medium ml-4 whitespace-nowrap">{{ 'PAC.INDICATOR.Period' | translate: {Default: 'Period'} }}</span>

            @for (p of PERIODS; track p.name) {
              <span class="pac-indicator__period-tag text-sm cursor-pointer inline-flex items-center font-semibold leading-sm uppercase px-2 py-1 rounded-lg"
                [ngClass]="{selected: p.name === previewPeriod()}"
                (click)="togglePeriod(p.name)"
              >
                {{p.name}}
              </span>
            }
          </div>

          <div ngmAction>
            <button class="btn pressable flex justify-center items-center w-6 h-6 rounded-full border-light" (click)="openExplain()">
              <i class="ri-terminal-box-line"></i>
            </button>
          </div>
        </ngm-analytical-card>
      }
    }
  </div>
</div>

<ng-template #menu>
  <div cdkMenu class="cdk-menu__medium">
    <button cdkMenuItem (click)="downloadTempl()">
      <i class="ri-download-2-line mr-1"></i>
      {{ 'PAC.MENU.INDICATOR.DownloadAsTemplate' | translate: {Default: "Download as Template"} }}
    </button>
    
    @if (type() !== 'copy' && indicator()?.id) {
      <button cdkMenuItem
        (click)="copy(indicator())">
        <i class="ri-file-copy-2-line mr-1"></i>
        {{ 'PAC.ACTIONS.COPY' | translate: {Default: "Copy"} }}
      </button>
    }

    @if (indicator()?.id) {
      <button cdkMenuItem class="danger" (click)="deleteIndicator()">
        <i class="ri-delete-bin-line mr-1"></i>
        {{ 'PAC.ACTIONS.Delete' | translate: {Default: "Delete"} }}
      </button>
    }
  </div>
</ng-template>
